<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">佣金明细</x-header>
    <div class="main-header">
      <div class="count">
        <div class="date">
          <div class="date-choose" @click="showDatetime">
            <div class="date-content">{{year + '年' + month + '月'}}</div>
            <div class="date-icon"></div>
          </div>
        </div>
        <div class="count-amount">
          <div class="count-amount-quantity">
            <p class="count-amount-title">0</p>
            <p class="count-amount-number">返佣（笔）</p>
          </div>
          <div class="count-amount-gap"></div>
          <div class="count-amount-money">
            <p class="count-amount-title">0.00</p>
            <p class="count-amount-number">返佣（元）</p>
          </div>
        </div>
      </div>
      <div class="list-tab">
        <tab active-color custom-bar-width="30px">
          <tab-item selected>返佣</tab-item>
          <tab-item>提现</tab-item>
        </tab>
      </div>
      <div v-if="current === 0">
        <x-table :cell-bordered="false" style="background-color:#fff;">
          <thead>
          <tr>
            <th>方式</th>
            <th>姓名</th>
            <th colspan="2">放款金额</th>
            <th colspan="2">返佣金额</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>Apple</td>
            <td>$1.25</td>
            <td colspan="2"> x 1</td>
            <td colspan="2"> x 1</td>
          </tr>
          </tbody>
        </x-table>
        <div class="list-blank">
          <img src="../../../static/img/blank.png" class="list-blank-img"/>
          <p class="list-blank-p">您还没有返佣记录哦～</p>
        </div>

      </div>
      <div v-if="current === 1">
        <x-table :cell-bordered="false" style="background-color:#fff;">
          <thead>
          <tr >
            <th>提现日期</th>
            <th>提现金额</th>
            <th>状态</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>2019-01-01</td>
            <td>129,000.00</td>
            <td>提现成功</td>
          </tr>
          </tbody>
        </x-table>
        <div class="list-blank">
          <img src="../../../static/img/blank.png" class="list-blank-img"/>
          <p class="list-blank-p">您还没有提现记录哦～</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bTabbar from '../../components/Btabbar'
import { XTable } from 'vux'
import ViewBox from "vux/src/components/view-box/index";
export default {
  name: 'index',
  components: {
    ViewBox,
    bTabbar,
    XTable
  },
  data () {
    return {
      date: '2019年02月',
      year: '2019',
      month: '02',
      current: 0
    }
  },
  methods: {
    showDatetime () {
      let _this = this
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM',
        value: this.date,
        onConfirm (val) {
          _this.date = val
          _this.year = val.split('-')[0]
          _this.month = val.split('-')[1]
          // replace(/^(\d{4})[\/|\-](\d{1,2})[\/|\-](\d{1,2})(.{3})(\d{1,2}):(\d{1,2}):(\d{1,2})$/mg, '$1年$2月$3日$4$5:$6')
        },
        onShow () {
        },
        onHide () {
        }
      })
    },
  }
}
</script>

<style scoped>
.count {
  background: #F14E2C;
  width: 100%;
  height: 10.7rem;
}
.date {
  display: flex;
  justify-content: center;
  padding: 1rem 0 2rem;
}
.date-choose {
  display: flex;
  background: rgba(255,255,255,0.20);
  border-radius: 2px;
  padding-right: 0.5rem;
  width: 7.5rem;
  height: 2.2rem;
}
.date-content {
  flex: 1;
  color: #FFFFFF;
  text-align: center;
  line-height: 2.2rem;
}
.date-icon {
  transform: translate(0,12px);
  border-width: 0.42rem;
  border-style:solid;
  border-color: #fff rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
}
.count-amount {
  display: flex;
  padding-bottom: 1rem;
  height: 4.5rem;
}
.count-amount-quantity {
  flex: 1;
}
.count-amount-gap {
  width: 1px;
  height: 100%;
  background: #FFFFFF;
}
.count-amount-money {
  flex: 1;
}
.count-amount-title {
  line-height: 33px;
  text-align: center;
  color: #fff;
  font-size: 1.71rem;
}
.count-amount-number {
  padding-top: 0.64rem;
  line-height: 20px;
  text-align: center;
  color: #fff;
}
.list-tab {
  margin-top: 1rem;
}
.table-title {
  color: #A6A6A6;
}
.table-body {
  color: #444;
}
.list-blank {

}
.list-blank-img {
  margin: 4.5rem auto 0;
  display: block;
  height: 11rem;
  width: 11rem;
}
.list-blank-p {
  color: #A6A6A6;
  text-align: center;
}
</style>
